<template>
  <view class="page-container">
    <!-- 个人中心卡片 - 新排版 -->
    <view class="profile-card">
      <view class="profile-header">
        <view class="avatar-section" @click="chooseAvatar">
          <view class="avatar-wrapper">
            <image class="avatar" :src="avatarUrl"></image>
            <view class="avatar-badge" v-if="isLogin">✓</view>
          </view>
          <view class="user-info">
            <text class="username">HI~{{ isLogin ? username : '欢迎回来' }}</text>
            <view class="user-stats">
              <view class="stat">
                <text class="stat-number">3</text>
                <text class="stat-label">关注</text>
              </view>
              <view class="stat-divider"></view>
              <view class="stat">
                <text class="stat-number">0</text>
                <text class="stat-label">话题</text>
              </view>
            </view>
          </view>
        </view>
        <button class="login-btn" @click="navigateToLogin" v-if="!isLogin">登录</button>
        <view class="logout-btn" @click="handleLogout" v-if="isLogin">退出</view>
      </view>
    </view>

    <!-- 快捷功能网格 - 新排版 -->
    <view class="quick-actions">
      <view class="action-item" v-for="(action, index) in quickActions" :key="index">
        <view class="action-icon">{{ action.icon }}</view>
        <text class="action-text">{{ action.text }}</text>
      </view>
    </view>

    <!-- 红包活动横幅 - 新排版 -->
    <view class="promo-banner">
      <view class="promo-content">
        <view class="promo-icon">🎁</view>
        <view class="promo-text">
          <text class="promo-title">瓜分30万现金红包</text>
          <text class="promo-subtitle">新用户专享福利</text>
        </view>
        <view class="promo-action">速抢 ></view>
      </view>
    </view>

    <!-- 发布内容区域 - 新排版 -->
    <view class="publish-section">
      <view class="section-header">
        <text class="section-title">发布新鲜事</text>
        <view class="feature-icons">
          <view class="feature-icon">📝</view>
          <view class="feature-icon">📷</view>
          <view class="feature-icon">🔗</view>
        </view>
      </view>
      
      <view class="community-stats">
        <view class="stats-visual">
          <view class="stats-bar">
            <view class="stats-progress" :style="{width: '70%'}"></view>
          </view>
          <view class="stats-info">
            <text class="stats-number">385,893人</text>
            <text class="stats-text">已在这里发布</text>
          </view>
        </view>
        <text class="stats-desc">分享你的生活瞬间</text>
      </view>

      <button class="primary-btn" @click="handlePublish">立即发布</button>
    </view>

    <!-- 底部导航 - 新排版 -->
    <view class="bottom-nav">
      <view 
        class="nav-item" 
        v-for="(item, index) in navItems" 
        :key="index"
        :class="{ active: activeNav === index }"
        @click="handleNavClick(item.type, index)"
      >
        <view class="nav-icon">{{ item.icon }}</view>
        <text class="nav-text">{{ item.text }}</text>
      </view>
    </view>

    <!-- 浮动发布按钮 -->
    <view class="float-action-btn" @click="handlePublish">
      <view class="fab-icon">+</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        avatarUrl: '/static/logo.png',
        isLogin: false,
        username: '',
        activeNav: 3,
        quickActions: [
          { icon: '⭐', text: '收藏' },
          { icon: '🕒', text: '历史' },
          { icon: '⚙️', text: '设置' }
        ],
        navItems: [
          { icon: '📰', text: '新闻', type: 'news' },
          { icon: '🎬', text: '视频', type: 'video' },
          { icon: '💬', text: '话题', type: 'topic' },
          { icon: '👤', text: '我的', type: 'mine' }
        ]
      }
    },
    onShow() {
      this.checkLoginStatus()
      this.updateNavText()
    },
    methods: {
      checkLoginStatus() {
        const userInfo = uni.getStorageSync('userInfo')
        if (userInfo && userInfo.username) {
          this.isLogin = true
          this.username = userInfo.username
          this.avatarUrl = userInfo.avatar || '/static/logo.png'
        } else {
          this.isLogin = false
          this.username = ''
          this.avatarUrl = '/static/logo.png'
        }
      },

      updateNavText() {
        this.navItems[3].text = this.isLogin ? '我的' : '未登录'
      },

      chooseAvatar() {
        if (!this.isLogin) {
          uni.showToast({ title: '请先登录', icon: 'none' })
          return
        }
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success: (res) => {
            this.avatarUrl = res.tempFilePaths[0];
            const userInfo = uni.getStorageSync('userInfo')
            userInfo.avatar = res.tempFilePaths[0]
            uni.setStorageSync('userInfo', userInfo)
          }
        });
      },

      navigateToLogin() {
        uni.navigateTo({ url: '/pages/component/login/login' });
      },

      handleLogout() {
        uni.showModal({
          title: '确认退出',
          content: '确定要退出当前账户吗？',
          success: (res) => {
            if (res.confirm) {
              uni.removeStorageSync('userInfo')
              this.isLogin = false
              this.username = ''
              this.avatarUrl = '/static/logo.png'
              this.updateNavText()
              uni.showToast({ title: '已退出登录' })
            }
          }
        })
      },

      handleNavClick(type, index) {
        this.activeNav = index
        if (type === 'mine') return
        this.switchTab(type)
      },

      switchTab(type) {
        const routes = {
          'news': '/pages/tabBar/news/news',
          'video': '/pages/tabBar/video/video',
          'topic': '/pages/tabBar/topic/topic'
        }
        if (routes[type]) {
          uni.switchTab({ url: routes[type] });
        }
      },

      handlePublish() {
        if (!this.isLogin) {
          uni.showModal({
            title: '提示',
            content: '发布内容需要先登录',
            success: (res) => {
              if (res.confirm) this.navigateToLogin();
            }
          });
          return
        }
        uni.showToast({ title: '跳转到发布页面' })
      },

      handleBrowse() {
        this.activeNav = 0
        uni.switchTab({ url: '/pages/news/news' });
      }
    }
  }
</script>

<style>
  .page-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 30rpx 30rpx 140rpx;
  }

  /* 个人中心卡片 */
  .profile-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20rpx);
    border-radius: 30rpx;
    padding: 40rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
  }

  .profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .avatar-section {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .avatar-wrapper {
    position: relative;
    margin-right: 30rpx;
  }

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: 4rpx solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.3);
  }

  .avatar-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36rpx;
    height: 36rpx;
    background: #4CAF50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20rpx;
    border: 3rpx solid white;
  }

  .user-info {
    flex: 1;
  }

  .username {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 15rpx;
  }

  .user-stats {
    display: flex;
    align-items: center;
    background: #f8f9ff;
    border-radius: 20rpx;
    padding: 15rpx 20rpx;
  }

  .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .stat-number {
    font-size: 32rpx;
    font-weight: bold;
    color: #667eea;
  }

  .stat-label {
    font-size: 24rpx;
    color: #666;
    margin-top: 5rpx;
  }

  .stat-divider {
    width: 1rpx;
    height: 30rpx;
    background: #e0e0e0;
    margin: 0 20rpx;
  }

  .login-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 12rpx 30rpx;
    border-radius: 25rpx;
    font-size: 28rpx;
    font-weight: 600;
  }

  .logout-btn {
    background: #f5f5f5;
    color: #666;
    padding: 12rpx 30rpx;
    border-radius: 25rpx;
    font-size: 28rpx;
  }

  /* 快捷功能网格 */
  .quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
    margin-bottom: 30rpx;
  }

  .action-item {
    background: white;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  }

  .action-icon {
    font-size: 50rpx;
    margin-bottom: 15rpx;
  }

  .action-text {
    font-size: 24rpx;
    color: #333;
  }

  /* 红包横幅 */
  .promo-banner {
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 10rpx 30rpx rgba(255, 154, 158, 0.3);
  }

  .promo-content {
    display: flex;
    align-items: center;
  }

  .promo-icon {
    font-size: 60rpx;
    margin-right: 20rpx;
  }

  .promo-text {
    flex: 1;
  }

  .promo-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 5rpx;
  }

  .promo-subtitle {
    font-size: 24rpx;
    color: #666;
  }

  .promo-action {
    background: rgba(255, 255, 255, 0.9);
    padding: 10rpx 20rpx;
    border-radius: 20rpx;
    color: #ff6b6b;
    font-weight: 600;
  }

  /* 发布区域 */
  .publish-section {
    background: white;
    border-radius: 30rpx;
    padding: 40rpx;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.08);
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
  }

  .section-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }

  .feature-icons {
    display: flex;
    gap: 15rpx;
  }

  .feature-icon {
    width: 60rpx;
    height: 60rpx;
    background: #f8f9ff;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
  }

  .community-stats {
    margin-bottom: 40rpx;
  }

  .stats-visual {
    margin-bottom: 20rpx;
  }

  .stats-bar {
    height: 20rpx;
    background: #f0f0f0;
    border-radius: 10rpx;
    overflow: hidden;
    margin-bottom: 15rpx;
  }

  .stats-progress {
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10rpx;
  }

  .stats-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .stats-number {
    font-size: 36rpx;
    font-weight: bold;
    color: #667eea;
  }

  .stats-text {
    font-size: 24rpx;
    color: #666;
  }

  .stats-desc {
    display: block;
    font-size: 24rpx;
    color: #999;
    text-align: center;
  }

  .primary-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    width: 100%;
    height: 100rpx;
    border-radius: 50rpx;
    font-size: 32rpx;
    font-weight: bold;
    box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.4);
  }

  /* 底部导航 */
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    display: flex;
    padding: 20rpx 0;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    box-shadow: 0 -5rpx 20rpx rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999;
    transition: all 0.3s ease;
  }

  .nav-item.active {
    color: #667eea;
  }

  .nav-item.active .nav-icon {
    transform: translateY(-10rpx);
  }

  .nav-icon {
    font-size: 40rpx;
    transition: all 0.3s ease;
  }

  .nav-text {
    font-size: 24rpx;
    margin-top: 5rpx;
  }

  /* 浮动按钮 */
  .float-action-btn {
    position: fixed;
    bottom: 140rpx;
    right: 40rpx;
    width: 100rpx;
    height: 100rpx;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.4);
    z-index: 999;
  }

  .fab-icon {
    font-size: 50rpx;
    color: white;
  }
</style>